<template>
  <div class="custom-form inte">
    <div class="title">求职意向</div>
    <el-form ref="form" :model="form" label-width="0px" :rules="rules">
      <el-form-item label="" prop="workMode">
        <div class="sex-box">
          <div class="bg radio-bg other">
            <span>全职</span>
            <el-radio v-model="form.workMode" :label="62">
              <span></span>
            </el-radio>
          </div>
          <div class="bg radio-bg other">
            <span>兼职</span>
            <el-radio v-model="form.workMode" :label="63">
              <span></span>
            </el-radio>
          </div>
          <div class="bg radio-bg other">
            <span>实习</span>
            <el-radio v-model="form.workMode" :label="64">
              <span></span>
            </el-radio>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="" prop="currentStatus">
        <el-select v-model="form.currentStatus" placeholder="求职状态" clearable>
          <el-option v-for="(v,i) in statusArr" :label="v.name" :value="v.val" :key="i">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="workPlaceAll">
        <el-select v-model="form.workPlaceAll" placeholder="期望地点" multiple :multiple-limit="3" @change="workChange">
          <el-option v-for="(v,i) in workPlaces" :label="v.name" :value="v.val" :key="i">
          </el-option>
        </el-select>
        <!--<el-cascader :options="options"  placeholder="期望地点" v-model="form.workPlace" clearable></el-cascader>-->
      </el-form-item>
      <el-form-item label="" prop="hopeTradeAll">
        <el-cascader popper-class="level2" :props="props" ref="hopeTrade" :show-all-levels="false"
          @change="function(val){changeCascader(val,1)}" :options="industryOptions" placeholder="期望行业"
          v-model="form.hopeTradeAll" clearable>
        </el-cascader>
      </el-form-item>
      <el-form-item label="" prop="hopeJobAll">
        <el-cascader popper-class="level3" :props="props" ref="hopeJob" :show-all-levels="false"
          @change="function(val){changeCascader(val,2)}" :options="jobOptions" placeholder="期望职类"
          v-model="form.hopeJobAll" clearable>
        </el-cascader>
      </el-form-item>
      <el-form-item label="" prop="hopeWage">
        <el-input v-model="form.hopeWage" placeholder="期望月薪"></el-input>
      </el-form-item>
    </el-form>
    <div class="save-box">
      <el-button type="primary" @click="pre">上一步</el-button>
      <el-button type="primary" @click="next('form')">完成</el-button>
    </div>
  </div>
</template>

<script>
//    import { getSelect } from '../../../api/registerInfo.js';
export default {
  props: ['pass', 'industryOptions', 'jobOptions', 'workPlaces', 'statusArr', 'basicForm'],
  data () {
    const salaryPass = (rule, value, callback) => {
      let reg = /^[0-9]*$/;
      if (value < 0) {
        callback(new Error("不能为负数"));
      } else if (value && !reg.test(value)) {
        callback(new Error("请输入整数"));
      } else if (!value) {
        callback();
      } else if (String(value).length > 5000000) {
        callback(new Error("不能多于5000000字"));
      } else {
        callback();
      }
    }
    return {
      props: {
        value: "code",
        label: "name",
        children: "childVo",
        multiple: true
      },
      form: {
        workPlaceAll: [],
        noExp: false,
        step: 4
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { max: 20, message: '请输入20字以内', trigger: 'change' }
        ],
        workMode: [
          { required: true, message: '请选择工作性质', trigger: 'change' }
        ],
        currentStatus: [
          { required: true, message: '请选择求职状态', trigger: 'change' }
        ],
        workPlaceAll: [
          { required: true, message: '请选择工作地点', trigger: 'change' }
        ],
        hopeTradeAll: [
          { required: true, message: '请选择期望行业', trigger: 'change' }
        ],
        hopeJobAll: [
          { required: true, message: '请选择期望职类', trigger: 'change' }
        ],
        hopeWage: [
          { required: true, message: '请输入期望月薪', trigger: 'blur' },
          { validator: salaryPass, trigger: 'change' }
        ]
      }
    };
  },
  components: {

  },
  watch: {
    'form.workMode': function (val) {
      if (val) {
        let _field = this.$refs['form'].fields
        _field.map(i => {
          if (i.prop === 'workMode') {
            i.clearValidate()
          }
        })

      }
    },
    'pass': function (val) {
      if (val) {
        this.next('form')
      }
    }
  },
  methods: {
    next (formName) {
      this.$emit('validForm');
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.pass) {
            this.$emit('next', this.form);
          }
        } else {
          return false;
        }
      });
    },
    pre () {
      this.$emit('pre')
    },
    changeCascader (val, type) {
      if (type == 1) {
        if (val.length > 3) {
          this.form.hopeTradeAll = this.form.hopeTradeAll.slice(0, -1)
          this.$message('最多三项');
        }
        this.form.hopeTrade = JSON.stringify(this.form.hopeTradeAll.map(i => {
          return i[i.length - 1]
        }))

      } else {
        if (val.length > 3) {
          this.form.hopeJobAll = this.form.hopeJobAll.slice(0, -1)
          this.$message('最多三项');
        }

        this.form.hopeJob = JSON.stringify(this.form.hopeJobAll.map(i => {
          return i[i.length - 1]
        }))
      }
    },
    workChange (val) {
      this.form.workPlace = JSON.stringify(val);
    },
    initData (result, options, field) {
      this.form[field] = [];
      result.forEach(item => {
        options.forEach(i => {
          if (i.childVo) {
            i.childVo.forEach(a => {
              if (a.id == item) {
                let arr = [];
                arr.push(i.id);
                arr.push(item);
                this.form[field].push(arr)
              }
              if (a.childVo) {
                a.childVo.forEach(b => {
                  if (b.id == item) {
                    let arr = [];
                    arr.push(i.id);
                    arr.push(a.id);
                    arr.push(item);
                    this.form[field].push(arr)
                  }
                })
              }
            })
          }
        })
      })
    }
  }
};
</script>

<style scoped>
.custom-form.inte {
    padding: 0;
}
.title {
    color: #222222;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 38px;
}
.bg {
    width: 100%;
    background: #f8f8f8;
    padding: 12px 24px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    display: inline-block;
}
.sex-box {
    display: flex;
}
.radio-bg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 44px;
}
.radio-bg:first-child {
    margin-right: 36px;
}
.radio-bg.other {
    margin-right: 26px;
}
.radio-bg.other:last-child {
    margin-right: 0px;
}
.save-box {
    display: flex;
}
.el-button {
    height: 44px;
    font-size: 16px;
    margin-top: 29px;
}
.save-box .el-button:first-child {
    width: 128px;
    margin-right: 38px;
}
.save-box .el-button:last-child {
    flex: 1;
}
</style>